<!DOCTYPE html>
<html lang="en">

    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>layui弹框</title>
        <link rel="stylesheet" type="text/css" href="layui/css/layui.css">
        <script src="layui/layui.js"></script>
    </head>

    <body>



        <br>
        <button class="layui-btn layui-btn-primary " onclick="f()">click me to open a form</button>
        <button class="layui-btn layui-btn-primary " onclick="f1()">click me to open a alert</button>
        <button class="layui-btn layui-btn-primary " onclick="f2()">click me to open a URL window</button>
        <button class="layui-btn layui-btn-primary " onclick="f3()">click me to open a ask window</button>
        <button class="layui-btn layui-btn-primary " onclick="f4()">click me to open a exit function</button>


        <input type="text" name="" id="" class="layui-input" disabled value="caonima">

        <script>
            var $;
            /* 预先加载模块 layui.js 的两个底层方法之一 */
            layui.use(['form', 'element', 'layer'], function() {
                var form = layui.form;
                var element = layui.element;
                var layer = layui.layer;
                $ = layui.jquery;
            });

            function f() {
                let index = layer.open({
                    type: 2,
                    fix: false,
                    title: "sky",
                    maxmin: true,
                    area: ['400px', '300px'],
                    content: 'form表单.html', //这里content可以是String,可以是html可以是其他文本

                    success: function() {
                        /*  alert(layero, index);
                         console.log('layero :>> ', layero);
                         console.log('index :>> ', index); */
                        //console.log("成功后回调");
                        layer.msg("弹出层弹出后成功后回调");
                    },
                    yes: function(index, layero) {
                        //如果没有点击按钮, 这个将无法执行
                        alert("你点击了确定!!");
                        layer.close(index); //如果设定了yes回调，需进行手工关闭
                    },
                    /*  cancel: function (index, layero) {
                         if (confirm('确定要关闭么')) { //只有当点击confirm框的确定时，该层才会关闭
                             layer.close(index);
                         } else {
                             return false;
                         }
                     }, */
                    full: function() {
                        alert("你最大化了窗口");
                    },
                    min: function() {
                        alert("你最小化了窗口");
                    },
                    restore: function() {
                        alert("你还原了窗口");
                    },
                    //怎么会第一时间去调这个方法?????????????????????????
                    end: function() {
                        alert("层销毁后触发的回调, 你关闭了窗口.....");
                        //window.location.href = "http://www.baidu.com" ;
                        //location.href = "http://www.baidu.com";
                    }
                });
                return index;
            }

            function f1() {
                //layer.alert('只想简单的提示');


                //layer.alert('加了个图标', { icon: 1 }); //这时如果你也还想执行yes回调，可以放在第三个参数中。
           /*     layer.alert('有了回调',   function(index) {
                    //do something

                    window.location.href = "http://www.baidu.com";
                    layer.close(index);
                }); */


                layer.confirm('您的商户号是:' + "1234" + " , 是否确定? ",
                    {
                        btn: ['确定'],
                        closeBtn: 0
                    },
                    function(index, layero) { //点击确定继续
                         window.location.href = "http://www.baidu.com";
                    });

                /* */


                /*    pop_show("CaO(艹氧化钙艹)", "test.html", 400, 400, function reload() {
                        alert("12341");
                        // window.location.href = "www.baidu.com";
                    }); */

            }


            function f2() {
                layer.open({
                    title: 'wdnmd',
                    type: 2,
                    icon: 1,
                    shade: 0.4,
                    time: 15000,
                    fix: false, //不固定
                    area: ['500px', '300px'],
                    anim: 5,
                    maxmin: true,
                    content: "https://www.layui.com/doc/modules/layer.html#content",
                    end: function(index, layero) {
                        alert("窗口关闭后的回调");
                    }
                });
            }

            function f3() {
                layer.confirm('纳尼？', {
                    btn: ['确定', '取消'],
                    closeBtn: 0 //把上面的❎按钮取消掉
               ,  btn1: function(index) {
                    //按钮【按钮一】的回调
                    // f();
                    layer.msg("确定");
                    layer.close(index); //回调完毕之后会关闭窗口
                    alert("给我关掉");
                }, btn2: function(index) {
                    layer.msg("cancel");
                    layer.close(index);
                    //按钮【按钮二】的回调
                }

                });


            }

            function reload() {
                //alert("12341");
                window.location.href = "www.baidu.com";
            }

            function pop_show(title, url, w, h, f) {
                if (title == null || title == '') {
                    title = false;
                };
                if (url == null || url == '') {
                    url = "404.html";
                };
                if (w == null || w == '') {
                    w = 800;
                };
                if (h == null || h == '') {
                    h = ($(window).height() - 50);
                };
                layer.open({
                    type: 2,
                    area: [w + 'px', h + 'px'],
                    fix: false, //不固定
                    maxmin: true,
                    shadeClose: false,
                    shade: 0.4,
                    title: title,
                    content: url,
                    end: f
                });
            }

            /*  layer.open({
                   type: 2
                   , title: '请填写渠道配置信息'
                   , area: ['80%', '80%']
                   , content: requestUrl
                   , btn: ['确定', '关闭']
                   , btnAlign: 'c'
                   , shadeClose: true
                   , yes: function (index, layero) {
                       //按钮【确定】的回调
                       layer.close(index);
                   }
                   , btn2: function (index, layero) {
                       //按钮【关闭】的回调
                       layer.close(index);

                       //return false 开启该代码可禁止点击该按钮关闭
                   }
                   , success(res) {
                       //成功之后的回调
                   }
               });*/
            function f4() {


                layer.confirm('您的商户号是:' + "1234" + " , 是否确定? ",

                    {
                        btn: ['确定', '取消'],
                        closeBtn: 0
                    },
                    function(index, layero) { //点击确定继续
                        layer.msg("yes");
                    },
                    function(index) {
                        //全部退出;
                        layer.msg("no");

                        alert("千万不要执行到我啊");
                    });




            }
        </script>
    </body>

</html>
